import { createVNode, render } from 'vue'
import toastTemplate from './Toast.vue'
export interface IProps {
    value?: string;
    duration?: number;
    background?: string;
    color?: string;
}
const defaultOpt = {
    duration: 3000
}

export interface ResultParams {
    destory?: () => void;
}
const Toast = (options: IProps):ResultParams => {
    const container = document.createElement('div')
    const opt = {...defaultOpt,...options}
    const vm = createVNode(toastTemplate, opt)
    render(vm, container)
    document.body.appendChild(container)
    const destory =  ()=> {
        const dom = vm.el as HTMLDivElement
        if(dom.querySelector('.toast-value')) {
            dom.querySelector('.toast-value')?.classList.add('remove')
            const t = setTimeout(() => {
                render(null, container)
                document.body.removeChild(container)
                clearTimeout(t)
            },500);
        } 
    }
    if(opt.duration) {
        const timer = setTimeout(()=> {
            destory()
            clearTimeout(timer)
        }, opt.duration)
    }
    return {
        destory
    }
}
export default Toast
